import React, {useEffect, useState} from 'react';
import {Row, Col, PageHeader, Button, Image, Avatar, Tooltip, Tabs} from 'antd';
import { CalendarOutlined,UserOutlined,AntDesignOutlined,LinkOutlined} from '@ant-design/icons';
import TweetsList from "../tweetsList"
import style from"./index.module.css"
import {post} from "../../../utils/post";
const {TabPane}=Tabs
/**
 *  用户详情页
 *
 *  获取指定ID用户的信息
 */
const User=(props)=> {
    const [page,changePage] =useState('1');
    const[data,changeData]=useState([])
    const[userInfo,changeUserInfo]=useState([])
    const {user} = props.match.params
    useEffect(()=>{
        post('/api/ownerMessages',{
            _id:user
            }
        ).then(res=>{
            const{ownerMessages,userInfo}=res.data.data
            changeData(ownerMessages);
            changeUserInfo(userInfo)
        })
    },[user])

    function handleChange (e){
        changePage(e);
    }
    function showPage (){
        switch (page){
            case '1':return <TweetsList isPerson={true} data={data} className={style.userTweets}/>
            case '2': return <div>传入用户已发过的推特及回复 </div>
            case '3': return <div>传入用户发过的视频</div>
            case '4': return <div>传入用户已点赞的推特数据</div>
            default:return <h2>发生未知错误</h2>
        }
    }

    const UserMain =()=>{
        const{nickname,age,avater,email,date,createdAt,profile}=userInfo;
    return(
        <div>
            {/*用户背景图*/}
            <Image
                className={style.background}
                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            />
            {/*用户头像 用户名等各种信息*/}
            <div className={style.userBox}>
                <Avatar
                    size={120}
                    src={avater}
                    className={style.avatar}
                />
                <Button className={style.follow} shape="round">Follow</Button>
                <Button  shape="circle" className={style.more}>
                    ...
                </Button>
                <div className={style.userinfo}>
                    <div style={{'fontSize':'20px','fontWeight': 'bold','color':'black'}}>
                        {nickname}
                    </div>
                    <div >
                        {email}
                    </div>
                    <div>
                        {profile}
                    </div>
                    <div>
                        <CalendarOutlined /><span style={{'marginLeft':'10px'}}>Joined {createdAt}</span>
                    </div>
                    <div className={style.followData}>
                        <span style={{'fontWeight':'bold'}}>0</span>
                        <span>Following</span>
                        <span style={{'fontWeight':'bold'}}>4.5k</span>
                        <span >Followers</span>
                    </div>
                    <div>
                        <Avatar.Group
                            maxCount={2}
                            maxPopoverTrigger="click"
                            size="large"
                            maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf', cursor: 'pointer' }}
                        >
                            <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                            <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
                            <Tooltip title="Ant User" placement="top">
                                <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
                            </Tooltip>
                            <Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
                        </Avatar.Group>
                        <span>Followed by xxx and xxx</span>
                    </div>
                </div>
            </div>
            <Tabs className={style.userBoxBtm} activeKey={page} onChange={handleChange}>
                <TabPane tab="Tweets" key="1" >
                </TabPane>
                {/*<TabPane tab=" Tweets & replies" key="2" >*/}
                {/*</TabPane>*/}
                {/*<TabPane tab=" Media" key="3" >*/}
                {/*</TabPane>*/}
                {/*<TabPane tab="Likes" key="4" >*/}
                {/*</TabPane>*/}
            </Tabs>
        </div>
    )
}

    return (
        <div>
            {/*布局：页头、用户信息展示、用户发过的推特*/}
            <PageHeader
                className={style.header}
                onBack={() =>{props.history.push('/index')}}
                title={userInfo.nickname}
                subTitle={data.length}
            />
            <UserMain></UserMain>
            {
                showPage()
            }

        </div>
    );
}

export default User;